<!--
超级表格参数
1、column：表头目录，label：表头名字，prop：表头对应的后端字段，format：当前表格自定义格式，参数val为当前行的数据，btns为自定义操作栏，disabled：可以根据当前行的数据来判断是否启用， event：事件名称
2、api：表格初始化渲染的请求方法
3、isIndex：是否开启表格序号
4、是否开启
5、where：表格渲染的条件，当where的值改变时，表格会自动筛选对应的条件
6、@xxx：注册事件，与column中的event的事件名称相对应
7、表格方法：clear：清空表格、getData：获取表格的数据，通过表格ref调用,getSelectable获取被选中的行
如何自定义某一个列单元格的内容？
方法一：表格format配置中format函数，返回一个html元素，采用html元素渲染，优点：方便，缺点：不支持vue组件
方法二：使用插槽，首先在format中配置slot为true，返回值为solt的那么属性为当前的prop，然后在<ComTable> <template #postCode="{ scope }">
      {{ scope.column.property }}
    </template></ComTable> scope:同element的插槽scope
方法三(最推荐使用)：表格format配置中formatter函数，返回一个字符串或虚拟dom元素，使用vue的h函数来自定义想要的组件示例：
 formatter: (row: any, column: any, cellValue: any, index: number) => {
      return h(
        ElTag,
        {
          type: "primary",
          style: { backgroundColor: "lightblue", cursor: "pointer" },
          onClick: () => {
            console.log(row.postSort);
          },
        },
        row.postSort
      );
    }
  8、表格属性支持透传,element Table API都能直接使用  
-->


<!--
超级表单参数
1、formRef：表单项配置。label：表单名称，prop：表单对应的后端字段，span：表单长度，rules:规则，
  defaultValue:表单初始默认值，type：表单类型，目前支持：input、select、date-range、date、button
2、@xxx：注册事件，与formRef中button的事件名称相对应
3、表单方法，通过表单ref调用
-->
<template>
  <ComForm
    ref="formRef"
    :format="format"
    @submit="submit"
    @reset="reset"
    class="form"
  ></ComForm>
  <button @click="getSelectionRows">获取被选中的行</button>
  <ComTable
    :cell-style="{ height: '50px' }"
    ref="tableRef"
    :column="column"
    :api="listPost"
    :where="where"
    :isSelection="true"
    @del="del"
    @edit="edit"
  >
    <template #postCode="{ scope }">
      {{ scope.column.property }}
      <el-tag
        class="ml-2"
        :type="scope.row.postCode % 2 == 1 ? 'warning' : 'success'"
        >{{ scope.row.postCode }}</el-tag
      >
    </template>
    <template #postSort="{ scope }">
      <el-tag
        class="ml-2"
        :type="scope.row.postCode % 2 == 1 ? 'warning' : 'success'"
        >{{ scope.row.postSort }}</el-tag
      >
    </template>
  </ComTable>
  <div>转换</div>
</template>
<script lang="ts" setup>
import { ref, h } from "vue";
import { listPost } from "@/api/system/post";
import { ElButton, ElTag } from "element-plus";

import { createSSRApp } from "vue";
import { renderToString } from "@vue/server-renderer";

async function renderComponentToString() {
  const app = createSSRApp(ElButton, { name: "Vue 3" });

  try {
    const htmlString = await renderToString(app);
    console.log(6666666666, htmlString); // 输出 HTML 字符串
  } catch (error) {
    console.error("渲染组件出错:", error);
  }
}
renderComponentToString();

//表格相关配置
const tableRef = ref();
let column = ref([
  {
    label: "岗位编号",
    prop: "postId",
    format: (val: any) =>
      `<span style="background-color:red;color:#fff;boder-radius:4px;padding:5px" >${val}</span>`,
  },
  {
    label: "岗位编码",
    prop: "postCode",
    slot: true,
  },
  { label: "岗位名称", prop: "postName" },
  {
    label: "岗位排序",
    prop: "postSort",
    formatter: (row: any, column: any, cellValue: any, index: number) => {
      return h(
        ElTag,
        {
          type: "primary",
          style: { backgroundColor: "lightblue", cursor: "pointer" },
          onClick: () => {
            console.log(row.postSort);
          },
        },
        row.postSort
      );
    },
  },
  {
    label: "状态",
    prop: "status",
    format: (val: any) => `<el-tag type="primary">${val}</el-tag>`,
  },
  { label: "创建时间", prop: "createTime" },
  {
    label: "操作",
    btns: [
      {
        title: "编辑",
        disabled: (data) => (data.postCode == 1 ? true : false),
        event: "edit",
      },
      { title: "删除", event: "del", type: "danger" },
    ],
  },
]);
const where = ref({});
const edit = (e) => {
  console.log("编辑", e);
};
const del = (e) => {
  console.log("删除", e);
};
const getSelectionRows = () => {
  console.log(tableRef.value.getSelectable());
};
// 表单相关配置
const format = ref([
  {
    label: "部件编号",
    prop: "postCode",
    type: "input",
    defaultValue: "8888888",
    span: 5,
    rules: [
      {
        required: true,
        trigger: "blur",
        message: "请填写部件编号",
      },
    ],
  },
  { label: "部件名称", prop: "postName", type: "input", span: 5, offset: 1 },
  {
    label: "岗位状态",
    prop: "status",
    type: "select",
    option: [
      { label: 0, value: 0 },
      { label: 1, value: 1 },
    ],
    span: 5,
    rules: [
      {
        required: true,
        message: "请填写岗位状态",
        trigger: "change",
      },
    ],
  },
  {
    label: "",
    prop: "",
    type: "button",
    btns: [
      { label: "查询", event: "submit", type: "success" },
      { label: "重置", event: "reset" },
    ],
    span: 8,
  },
]);
const formRef = ref(null);
const submit = (data: any) => {
  formRef.value.checkForm().then((result) => {
    if (result) {
      //内部执行提交逻辑
    }
  });
};
const reset = (data: any) => {
  console.log(data);
  formRef.value.reset();
};
</script>
<style scoped>
.form {
  padding: 20px 20px;
}
</style>